<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDX教务评教助手</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <header class="header">
            <div class="header-content">
                <div class="logo">
                    <i class="fas fa-graduation-cap"></i>
                    <h1>PDX教务评教助手</h1>
                </div>
                <p class="subtitle">智能化课程评价系统，让评教变得简单高效</p>
                <p class="subtitle">联系方式：VX:hfcloud6</p>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 登录表单卡片 -->
            <div class="card login-card">
                <div class="card-header">
                    <i class="fas fa-sign-in-alt"></i>
                    <h2>登录信息</h2>
                </div>
                <div class="card-body">
                    <form id="loginForm">
                        <div class="form-group">
                            <label for="baseUrl">
                                <i class="fas fa-link"></i>
                                教务系统地址
                            </label>
                            <input type="url" id="baseUrl" name="baseUrl" 
                                   placeholder="例如: https://jwgl.university.edu.cn" 
                                   required>
                            <small class="form-hint">请输入完整的教务系统网址(默认仅支持邯郸学院)</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="username">
                                <i class="fas fa-user"></i>
                                学号
                            </label>
                            <input type="text" id="username" name="username" 
                                   placeholder="请输入您的学号" 
                                   required>
                        </div>
                        
                        <div class="form-group">
                            <label for="password">
                                <i class="fas fa-lock"></i>
                                密码
                            </label>
                            <input type="password" id="password" name="password" 
                                   placeholder="请输入您的密码" 
                                   required>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 操作按钮区域 -->
            <div class="action-buttons">
                <button id="loginBtn" class="btn btn-primary">
                    <i class="fas fa-sign-in-alt"></i>
                    <span>登录验证</span>
                </button>
                
                <button id="getCoursesBtn" class="btn btn-secondary" disabled>
                    <i class="fas fa-list"></i>
                    <span>获取课程</span>
                </button>
                
                <button id="autoEvaluateBtn" class="btn btn-success">
                    <i class="fas fa-magic"></i>
                    <span>一键评教</span>
                </button>
            </div>

            <!-- 结果显示区域 -->
            <div class="result-section">
                <div class="card result-card">
                    <div class="card-header">
                        <i class="fas fa-chart-line"></i>
                        <h2>操作结果</h2>
                    </div>
                    <div class="card-body">
                        <div id="resultContent" class="result-content">
                            <div class="empty-state">
                                <i class="fas fa-info-circle"></i>
                                <p>请先填写登录信息，然后选择操作</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 页脚 -->
        <footer class="footer">
            <p>&copy; 2025 教务评教助手 - 让评教更简单</p>
        </footer>
    </div>

    <!-- 加载动画模态框 -->
    <div id="loadingModal" class="modal">
        <div class="modal-content">
            <div class="loading-spinner">
                <div class="spinner"></div>
                <p id="loadingText">正在处理中...</p>
            </div>
        </div>
    </div>

    <!-- 通知组件 -->
    <div id="notification" class="notification">
        <div class="notification-content">
            <i class="notification-icon"></i>
            <span class="notification-message"></span>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

